import React, {Fragment, useState, useEffect, useRef} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import {faMarkdown} from "@fortawesome/free-brands-svg-icons";
import {faEdit, faTimes, faTrash} from "@fortawesome/free-solid-svg-icons";
import "./index.scss";
import useKeyPress from "../../hooks/useKeyPress";
/*
@name:FileList
@description: 左侧文件列表组件，根据editId判断是否为编辑状态
@author: ChangHao
@time: 2020-11-05 22:30:11
*/
const FileList = ({fileList, saveEditFile}) => {
    const [editId, setEditId] = useState(false)
    const [inputActive, setInputActive] = useState(false)
    const inputRef = useRef(null)
    const [value, setValue] = useState('');
    const enterPress = useKeyPress(13);
    const escPress = useKeyPress(27);
    useEffect(() => {
        if (enterPress && inputActive && editId) {
            setInputActive(false);
            saveEditFile(value, editId);
            closeInput();
        }
        if (escPress && inputActive) {
            closeInput();
        }
        // const editFileHandler = (event) => {
        //     const {keyCode} = event;
        //     if (keyCode === 13) {
        //         event.preventDefault();
        //         setInputActive(false);
        //         saveEditFile(value, editId);
        //         closeInput(event);
        //     } else if ((keyCode === 27) & editId) {
        //         closeInput(event);
        //     }
        // };
        // document.addEventListener("keyup", editFileHandler);
        // return () => {
        //     document.removeEventListener("keyup", editFileHandler);
        // };
    });
    useEffect(() => {
        if (inputActive) {
            inputRef.current.focus();
        }
    }, [inputActive])

    /*
    @name: closeInput
    @description: 关闭编辑框 通过调用父组件的方法 `editFile` 修改editId
    @author: ChangHao
    @time: 2020-11-05 22:39:13
    */
    function closeInput() {
        setEditId(false)
        setValue('');
        setInputActive(false);
    }

    return (
        <Fragment>
            <ul className="list-group list-group-flush">

                {fileList.map((v) => {
                    return (
                        <li
                            key={v.id}
                            className="list-group-item d-flex justify-content-between  align-items-center"
                        >

                            {editId !== v.id && (
                                <>
                                    <div className="title">
                                        <FontAwesomeIcon className='markdown-icon' icon={faMarkdown} size='lg'
                                                         color='#fe4b40'/>
                                        <span>{v.title}</span>
                                    </div>
                                    <div className="action">
                                        <FontAwesomeIcon
                                            className="icon"
                                            onClick={() => {
                                                setValue(v.title);
                                                setEditId(v.id);
                                                setInputActive(true);
                                            }}
                                            icon={faEdit}
                                            size="lg"
                                        />
                                        <FontAwesomeIcon
                                            className="icon"
                                            icon={faTrash}
                                            size="lg"
                                        />
                                    </div>
                                </>
                            )}
                            {editId === v.id && <>
                                <input
                                    type="text"
                                    className="form-control  col-9中·"
                                    placeholder="请输入名称.."
                                    aria-label="doucmentName"
                                    aria-describedby="basic-addon2"
                                    value={value}
                                    ref={inputRef}
                                    onChange={(e) => setValue(e.target.value)}
                                />
                                <button
                                    type="button"
                                    className="self-button  col-3"
                                    onClick={closeInput}
                                >
                                    <FontAwesomeIcon icon={faTimes} color='#004085'/>
                                </button>
                            </>}
                        </li>
                    );
                })}
            </ul>
        </Fragment>
    );
};
FileList.propTypes = {
    fileList: PropTypes.array,
    saveEditFile: PropTypes.func,
};
FileList.defaultProps = {
    fileList: [],
};
export default FileList;
